@import "./variables";
.#{$prefix}-menubar {
  &.#{$prefix}-menubar--vertical {
    width: $menu-width;
    height: 100%;
    &.#{$prefix}-menubar--collapse {
      width: $menu-collapse-width;
      height: 100%;
    }
    .#{$prefix}-menubar__wrap {
      width: 100%;
      height: 100%;
      background:  $clr-menu-nav-bg-color;
      .#{$prefix}-menubar__wrap--menus {
        width: 100%;
        height: calc(100% - #{$menu-item-vertical-height});
        overflow: auto;
        overflow-x: hidden;
        background: $clr-menu-nav-bg-color;
      }
      .#{$prefix}-menubar__wrap--foldicon {
        width: 100%;
        height: $menu-item-vertical-height;
        background-color: rgba($clr-menu-fold-color, 0.05);
        color: rgba($clr-menu-fold-color, 0.5);
        border-top: 1px solid rgba($clr-menu-fold-color, 0.1);
        font-size: $font-20;
        line-height: $menu-item-vertical-height;
        text-align: center;
        cursor: pointer;
        .#{$prefix}-icon {
          font-size: $font-20;
        }
      }
    }

  }
}
